<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery/jquery.js"></script>
    <script src="js/vue/vue.js"></script>
</head>
<body>
<div id="app">
    {{result.result}}
</div>
</body>
<script>
    function getZhushiOb(content, reg, zhushiMap) {
        if (!content) {
            var aa = [];
            aa.push({word: '\n', type: 'nm'});
            return aa;
        }
        var re = new RegExp(reg, 'g');
        var nc = content.replace(re, '@$1@');
        var ncArr = nc.split(/[@]+/g);
        var arr = [];
        for (var i = 0; i < ncArr.length; i++) {
            var word = ncArr[i];
            var val = zhushiMap[word];
            var o = {};
            o.word = word;
            if (val) {
                o.type = 'zs';
            } else {
                o.type = 'nm';
            }
            arr.push(o);
        }
        return arr;
    }
    /*删除html ，并转换<br> <p>为换行 */
    function convertHtmlTag(str) {
        str = str.replace(new RegExp('\n+', 'g'), '');
        str = str.replace(new RegExp('<br[ /]*>', 'g'), '\n');
        str = str.replace(new RegExp('<p[ /]*>', 'g'), '\n\n');
        return str.replace(new RegExp('<[^>]+>', 'g'), "");
    }
    var reg = '';
    function getZhushiMap() {
        var zhushi = $("#zs_zhushi").html();
        zhushi = convertHtmlTag(zhushi);
        var arr = zhushi.split('\n');
        var o = {};

        var juReg = /["“”](.+)["“”]句/g;
        for (var i = 0; i < arr.length; i++) {
            var na = arr[i].split(/[:：]/);
            if (na.length >= 2) {
                var k = na[0].replace(/【[0-9]+】/, '');
                var v = '';
                for (var j = 1; j < na.length; j++) {
                    v += na[j];
                    if (j !== na.length - 1) v += "：";
                }
                var oo = {
                    key: k,
                    val: v
                };
                var kk = k.replace(/[(（].+?[）)]/g, '');
                if (juReg.test(kk)) {
                    kk = kk.replace(juReg, "$1");
                }
                o[kk] = oo;
                reg += kk + "|";
            }
        }
        reg = '(' + reg.substr(0, reg.length - 1) + ')';
        return o;
    }
    var zhushiMap = getZhushiMap();
    function getZhuzhiContent(content) {
        var ctArr = content.split('\n');
        var contentList = [];
        for (var hh = 0; hh < ctArr.length; hh++) {
            var shiju = ctArr[hh];
            var a = getZhushiOb(shiju, reg, zhushiMap);
            contentList.push(a);
        }
        var html = '';
        for (var c = 0; c < contentList.length; c++) {
            var shijus = contentList[c];
            html += '<div>';
            for (var d = 0; d < shijus.length; d++) {
                var word = shijus[d];
                if (word.type === 'zs') {
                    html += '<span style="border-bottom: 1px solid #999;margin: 0 1px;" class="zhushi_word">' + word.word + '</span>';
                } else {
                    var w = word.word;
                    if (w === '\n') {
                        w = "<br />";
                    }
                    html += '<span>' + w + '</span>';
                }
            }
            html += '</div>';
        }
        return html;
    }
</script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            result: []
        },
        mounted: function () {
            var _this = this;
            $.get("http://localhost:8080/", function (data) {
                console.log(data);
                _this.result = data;
            })
        }
    })
</script>
</html>